<script setup lang="ts">
import { defineComponent, ref, type Component } from 'vue'
import { defineAsyncComponent } from 'vue'

// 定义一个响应式变量存储远程组件
const remoteComponent = ref<Component>()

// 模拟加载远程组件
const loadRemoteComponent = async () => {
  try {
    // 动态导入远程组件
    // const module = await import('http://127.0.0.1:5500/dist/remote-component.umd.js')
    // console.log(module)

    remoteComponent.value = defineAsyncComponent(
      () =>
        new Promise((resolve, reject) => {
          resolve('http://127.0.0.1:5500/dist/remote-component.umd.js')
        }),
    )
  } catch (error) {
    console.error('加载远程组件失败:', error)
  }
}
</script>

<template>
  <div>
    <h1>远程动态组件加载示例</h1>
    <!-- <button @click="loadRemoteComponent">加载远程组件</button>
    <component :is="remoteComponent" v-if="remoteComponent" /> -->
  </div>
</template>
